import React, { Component } from 'react'

import './category.less'
import { Table } from 'antd'
import { getHero } from '../../api'
/*
商品路由
*/
const style__ = { "width": "100%" }



export default class Category extends Component {

    componentDidMount() {
        this.setState({
            loading:true
        })
        getHero().then(res => {
            this.setState({
                dataSource: res.data,
                loading:false
            })
        })
    }

    state = {
        loading:false,
        dataSource: [],
        columns: [
            {
                title: 'Id',
                width: 80,
                align: "center",
                dataIndex: 'hero_id',
                key: 'hero_id'
            },
            {
                title: '英雄名',
                width: 140,
                align: "center",
                dataIndex: 'hero_name',
                key: 'hero_name'
            },
            {
                title: '英雄原画',
                align: "center",
                width: 120,
                dataIndex: 'hero_picture',
                key: 'hero_picture',
                render: (record) => {
                    return <img src={record} alt="" style={{ width: '100px', height: '60px'}} />
                }
            },
            {
                title: '英雄简介',
                align: "center",
                width: 140,
                ellipsis: "ture",
                dataIndex: 'hero_text',
                key: 'hero_text'
            },
            {
                title: '出售价格',
                width: 140,
                ellipsis: "ture",
                align: "center",
                dataIndex: 'hero_price',
                key: 'hero_price'
            },
            {
                title: '英雄技能',
                align: "center",
                width: 160,
                ellipsis: "ture",
                dataIndex: 'hero_jn',
                key: 'hero_jn'
            },
            {
                title: '英雄玩法',
                align: "center",
                ellipsis: "ture",
                dataIndex: 'note',
                key: 'note'
            }
        ]

    }
    render() {
        const {loading} =this.state
        return (
            <div>
                <Table className="table" bordered="ture" loading={loading}
                columns={this.state.columns} dataSource={this.state.dataSource}
                pagination={{ pageSize:5, defaultCurrent: 5,showQuickJumper:true}}>
                </Table>
            </div>
        )
    }
}
